<script setup>
import { useUserStore } from "@/store";
import { computed } from "vue";
import { getToken } from "@/utils/auth";

const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);



const toAuthPage = () => {
  uni.navigateTo({ url: "/pages/auth/index" });
};

const toPage = (url) => {
  uni.navigateTo({ url });
};

function clickQueryFn() {
  if (!getToken()) {
    uni.navigateTo({ url: "/pages/wxlogin/index" });
  }

}
</script>

<template>
  <div class="userInfo">
    <div class="userAvatar" @click="toAuthPage">
      <img v-if="userInfo.avatarUrl" class="userAvatar" :src="userInfo.avatarUrl" alt="" />
      <img v-else style="width: 96rpx; height: 96rpx; border-radius: 50%"
        src="https://devweb.topyunliu.com/upload/2025/04/21/file_20250421152751A001.jpeg" alt="" />
    </div>
    <div class="nameSty">
      <div class="userName">
        <div class="nameWidth">{{ userInfo.nickname || '游客' }}</div>
        <div class="levelNameSty" v-if="userInfo.level !== 0">
          {{ userInfo.levelName || '普通会员' }}
        </div>
      </div>
      <div class="userAccount" @click="toPage('/user-center/vip/index')">
        <span class="text">
          绘画算力 {{ (userInfo.genImageNum + userInfo.rewardImageNum) || 0 }}
          <van-icon name="arrow" />
        </span>
      </div>
      <div class="freeQuery" v-if="userInfo?.baseUserId">
        <div>ID：{{ userInfo?.baseUserId }}</div>
      </div>
    </div>
    <div class="queryTimes" @click.stop="clickQueryFn">
      <span v-if="getToken()"> 可查询：{{ userInfo.freeCount || 0 }}/{{ userInfo.inviteFreeCount || 0 }}</span>
      <span v-else>登录/注册</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
.userInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 10rpx 0;

  .userAvatar {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
  }

  .nameSty {
    flex: 1;
    margin-left: 30rpx;
  }

  .queryTimes {
    box-sizing: border-box;
    padding: 0 10rpx;
    min-width: 180rpx;
    height: 64rpx;
    background: var(--a-main-box-bg-color);
    border-radius: 22rpx;
    font-size: 24rpx;
    color: var(--a-two-text-color);
    text-align: center;
    white-space: nowrap;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .userName {
    font-size: 30rpx;
    font-weight: bold;
    white-space: nowrap;
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;

    .nameWidth {
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200rpx;
      color: var(--a-one-text-color);
    }

    .levelNameSty {
      display: inline-block;
      background-color: #5c4f42;
      border-radius: 15rpx;
      width: 91rpx;
      height: 31rpx;
      line-height: 31rpx;
      font-size: 18rpx;
      color: #f8bc75;
      text-align: center;
      margin-left: 10rpx;
    }
  }

  .userAccount {
    font-size: 21rpx;
    margin: 12rpx 0 10rpx;

    .text {
      padding: 0 0 2rpx 12rpx;
      min-width: 168rpx;
      height: 37rpx;
      line-height: 37rpx;
      border-radius: 8rpx;
      border: 1rpx solid #ffcf86;
      color: #ffcf86;
    }
  }

  .freeQuery {
    display: flex;
    color: var(--a-two-text-color);
    font-size: 22rpx;
    // justify-content: space-between;
    align-items: center;
  }
}
</style>
